<template>
	<view class="container">
		<!-- 视频播放区域 -->
		<view class="video-section">
			<video :src="video.url" 
				class="video-player"
				:poster="video.cover"
				controls
				@error="handleVideoError" />
		</view>
		
		<!-- 视频信息 -->
		<view class="video-info">
			<text class="video-title">{{ video.title }}</text>
			<view class="video-stats">
				<text class="views">{{ video.views }}观看</text>
				<text class="date">{{ video.createTime }}</text>
			</view>
		</view>
		
		<!-- 操作栏 -->
		<view class="action-bar">
			<view class="action-item" @click="handleLike">
				<text class="iconfont icon-like" :class="{ active: video.isLiked }"></text>
				<text class="action-text">{{ video.likes }}</text>
			</view>
			<view class="action-item" @click="handleCollect">
				<text class="iconfont icon-collect" :class="{ active: video.isCollected }"></text>
				<text class="action-text">{{ video.collects }}</text>
			</view>
			<view class="action-item" @click="handleShare">
				<text class="iconfont icon-share"></text>
				<text class="action-text">分享</text>
			</view>
		</view>
		
		<!-- 作者信息 -->
		<view class="author-section">
			<view class="author-info">
				<image :src="video.author.avatar" class="author-avatar" mode="aspectFill" />
				<view class="author-detail">
					<text class="author-name">{{ video.author.name }}</text>
					<text class="author-fans">{{ video.author.fans }}粉丝</text>
				</view>
			</view>
			<view class="follow-btn" :class="{ following: video.author.isFollowed }" @click="handleFollow">
				{{ video.author.isFollowed ? '已关注' : '+ 关注' }}
			</view>
		</view>
		
		<!-- 视频描述 -->
		<view class="description-section">
			<text class="description-text">{{ video.description }}</text>
			<view class="game-tag" @click="navigateToGame">
				<image :src="video.game.logo" class="game-logo" mode="aspectFill" />
				<text class="game-name">{{ video.game.name }}</text>
				<text class="arrow">›</text>
			</view>
		</view>
		
		<!-- 评论区 -->
		<view class="comment-section">
			<view class="section-header">
				<text class="section-title">评论 {{ video.comments.length }}</text>
				<text class="sort-text">最新</text>
			</view>
			
			<!-- 评论输入框 -->
			<view class="comment-input">
				<image src="/static/tiwen.gif" class="user-avatar" mode="aspectFill" />
				<input type="text" 
					v-model="commentText"
					placeholder="说点什么..."
					placeholder-class="input-placeholder"
					@confirm="submitComment"
					class="input-field" />
			</view>
			
			<!-- 评论列表 -->
			<view class="comment-list">
				<view class="comment-item" v-for="comment in video.comments" :key="comment.id">
					<image :src="comment.user.avatar" class="comment-avatar" mode="aspectFill" />
					<view class="comment-content">
						<view class="comment-header">
							<text class="comment-user">{{ comment.user.name }}</text>
							<text class="comment-time">{{ comment.time }}</text>
						</view>
						<text class="comment-text">{{ comment.content }}</text>
						<view class="comment-actions">
							<view class="action" @click="likeComment(comment)">
								<text class="iconfont icon-like" :class="{ active: comment.isLiked }"></text>
								<text class="count">{{ comment.likes }}</text>
							</view>
							<view class="action" @click="replyComment(comment)">
								<text class="iconfont icon-reply"></text>
								<text class="count">回复</text>
							</view>
						</view>
						<!-- 回复列表 -->
						<view class="reply-list" v-if="comment.replies && comment.replies.length">
							<view class="reply-item" v-for="reply in comment.replies" :key="reply.id">
								<text class="reply-user">{{ reply.user.name }}</text>
								<text class="reply-text">{{ reply.content }}</text>
							</view>
							<text class="show-more" v-if="comment.replies.length > 2">查看更多回复</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { games } from '../../../utils/gameData.js';

export default {
	data() {
		return {
			video: {
				url: '',
				cover: '',
				title: '这个游戏的隐藏关卡也太好玩了',
				views: 12580,
				createTime: '2024-01-15',
				likes: 666,
				isLiked: false,
				collects: 88,
				isCollected: false,
				author: {
					name: '游戏达人',
					avatar: '/static/tiwen.gif',
					fans: '12.5w',
					isFollowed: false
				},
				description: '偶然发现的隐藏关卡，玩法非常有趣，和大家分享一下通关技巧...',
				game: games[0],
				comments: []
			},
			commentText: ''
		}
	},
	created() {
		this.generateMockComments();
	},
	methods: {
		generateMockComments() {
			// 生成模拟评论数据
			this.video.comments = Array(10).fill().map((_, index) => ({
				id: `comment_${index}`,
				user: {
					name: `用户${index + 1}`,
					avatar: '/static/tiwen.gif'
				},
				content: this.getRandomComment(),
				time: this.getRandomTime(),
				likes: Math.floor(Math.random() * 100),
				isLiked: false,
				replies: index % 3 === 0 ? this.generateMockReplies() : []
			}));
		},
		generateMockReplies() {
			return Array(Math.floor(Math.random() * 3) + 1).fill().map((_, index) => ({
				id: `reply_${index}`,
				user: {
					name: `回复用户${index + 1}`,
					avatar: '/static/tiwen.gif'
				},
				content: this.getRandomReply()
			}));
		},
		getRandomComment() {
			const comments = [
				'太厉害了，学到了',
				'这个技巧很实用',
				'感谢分享，马上去试试',
				'原来还可以这样玩',
				'期待更多视频'
			];
			return comments[Math.floor(Math.random() * comments.length)];
		},
		getRandomReply() {
			const replies = [
				'赞同',
				'确实很好',
				'学习了',
				'支持一下',
				'继续加油'
			];
			return replies[Math.floor(Math.random() * replies.length)];
		},
		getRandomTime() {
			const times = ['刚刚', '5分钟前', '1小时前', '2小时前', '昨天'];
			return times[Math.floor(Math.random() * times.length)];
		},
		handleVideoError() {
			uni.showToast({
				title: '视频加载失败',
				icon: 'none'
			});
		},
		handleLike() {
			this.video.isLiked = !this.video.isLiked;
			this.video.likes += this.video.isLiked ? 1 : -1;
		},
		handleCollect() {
			this.video.isCollected = !this.video.isCollected;
			this.video.collects += this.video.isCollected ? 1 : -1;
		},
		handleShare() {
			uni.showActionSheet({
				itemList: ['分享到微信', '复制链接', '生成海报'],
				success: (res) => {
					uni.showToast({
						title: '分享成功',
						icon: 'success'
					});
				}
			});
		},
		handleFollow() {
			this.video.author.isFollowed = !this.video.author.isFollowed;
			uni.showToast({
				title: this.video.author.isFollowed ? '已关注' : '已取消关注',
				icon: 'success'
			});
		},
		navigateToGame() {
			uni.navigateTo({
				url: `/pages/lobby/gameDetail?id=${this.video.game.game_id}`
			});
		},
		submitComment() {
			if (!this.commentText.trim()) {
				return;
			}
			
			const newComment = {
				id: `comment_${Date.now()}`,
				user: {
					name: '我',
					avatar: '/static/tiwen.gif'
				},
				content: this.commentText,
				time: '刚刚',
				likes: 0,
				isLiked: false,
				replies: []
			};
			
			this.video.comments.unshift(newComment);
			this.commentText = '';
			
			uni.showToast({
				title: '评论成功',
				icon: 'success'
			});
		},
		likeComment(comment) {
			comment.isLiked = !comment.isLiked;
			comment.likes += comment.isLiked ? 1 : -1;
		},
		replyComment(comment) {
			uni.showToast({
				title: '回复功能开发中',
				icon: 'none'
			});
		}
	}
}
</script>

<style scoped>
.container {
	min-height: 100vh;
	background: #1E1E2E;
}

.video-section {
	width: 100%;
	height: 225px;
	background: #000;
}

.video-player {
	width: 100%;
	height: 100%;
}

.video-info {
	padding: 15px;
}

.video-title {
	font-size: 16px;
	color: #9796B8;
	margin-bottom: 8px;
}

.video-stats {
	display: flex;
	gap: 15px;
	font-size: 12px;
	color: #6E6C89;
}

.action-bar {
	display: flex;
	justify-content: space-around;
	padding: 12px;
	border-bottom: 1px solid rgba(110, 108, 137, 0.1);
}

.action-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}

.action-text {
	font-size: 12px;
	color: #6E6C89;
}

.iconfont {
	font-size: 20px;
	color: #6E6C89;
}

.iconfont.active {
	color: #9796B8;
}

.author-section {
	padding: 15px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid rgba(110, 108, 137, 0.1);
}

.author-info {
	display: flex;
	align-items: center;
	gap: 12px;
}

.author-avatar {
	width: 40px;
	height: 40px;
	border-radius: 20px;
}

.author-detail {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.author-name {
	font-size: 15px;
	color: #9796B8;
}

.author-fans {
	font-size: 12px;
	color: #6E6C89;
}

.follow-btn {
	padding: 6px 15px;
	border-radius: 15px;
	background: #9796B8;
	color: #1E1E2E;
	font-size: 14px;
}

.follow-btn.following {
	background: #2D2D44;
	color: #6E6C89;
}

.description-section {
	padding: 15px;
	border-bottom: 1px solid rgba(110, 108, 137, 0.1);
}

.description-text {
	font-size: 14px;
	color: #9796B8;
	line-height: 1.5;
	margin-bottom: 12px;
}

.game-tag {
	display: flex;
	align-items: center;
	gap: 8px;
	background: #2D2D44;
	padding: 8px 12px;
	border-radius: 8px;
}

.game-logo {
	width: 24px;
	height: 24px;
	border-radius: 4px;
}

.game-name {
	flex: 1;
	font-size: 14px;
	color: #9796B8;
}

.arrow {
	font-size: 16px;
	color: #6E6C89;
}

.comment-section {
	padding: 15px;
}

.section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 15px;
}

.section-title {
	font-size: 16px;
	color: #9796B8;
}

.sort-text {
	font-size: 14px;
	color: #6E6C89;
}

.comment-input {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
}

.user-avatar {
	width: 32px;
	height: 32px;
	border-radius: 16px;
}

.input-field {
	flex: 1;
	background: #2D2D44;
	border-radius: 16px;
	padding: 8px 15px;
	font-size: 14px;
	color: #9796B8;
}

.input-placeholder {
	color: #6E6C89;
}

.comment-list {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.comment-item {
	display: flex;
	gap: 12px;
}

.comment-avatar {
	width: 32px;
	height: 32px;
	border-radius: 16px;
	flex-shrink: 0;
}

.comment-content {
	flex: 1;
}

.comment-header {
	display: flex;
	justify-content: space-between;
	margin-bottom: 4px;
}

.comment-user {
	font-size: 14px;
	color: #9796B8;
}

.comment-time {
	font-size: 12px;
	color: #6E6C89;
}

.comment-text {
	font-size: 14px;
	color: #9796B8;
	line-height: 1.4;
	margin-bottom: 8px;
}

.comment-actions {
	display: flex;
	gap: 20px;
	margin-bottom: 8px;
}

.action {
	display: flex;
	align-items: center;
	gap: 4px;
}

.action .iconfont {
	font-size: 16px;
}

.count {
	font-size: 12px;
	color: #6E6C89;
}

.reply-list {
	background: #2D2D44;
	border-radius: 8px;
	padding: 8px 12px;
}

.reply-item {
	margin-bottom: 8px;
}

.reply-user {
	font-size: 12px;
	color: #9796B8;
	margin-right: 6px;
}

.reply-text {
	font-size: 12px;
	color: #6E6C89;
}

.show-more {
	font-size: 12px;
	color: #9796B8;
	margin-top: 4px;
}
</style> 